<template>
	<div v-show="showPage">
		<div style="border-bottom: 1px solid #ddd;">
			<h3>字段选择</h3>
		</div>
		<div style="max-height:400px;overflow: auto;display: flex;">
			<div>
				<div style="text-align: center;">主数据源</div>
				<div style="display: flex;">
					<div style="width:60px;text-align: center;">
						显示列
					</div>
					<div style="width:150px;text-align: center;">
						名称
					</div>
					<div style="width:150px;text-align: center;">
						视图类型
					</div>
					<div style="width:60px;text-align: center;" v-show="showSearch">
						查询列
					</div>
				</div>
				<draggable :list="fieldList">
					<div v-for="element in fieldList" :key="element.columnName" style="display: flex;margin-top: 5px;">
						<div style="width:60px;text-align: center;">
							<el-checkbox v-model="element.displayInList" style="height: 24px;"></el-checkbox>
						</div>
						<div style="width:150px;text-align: center;">
							{{element.name}}
						</div>
						<div style="width:150px;text-align: center;">
							<el-select size="mini" v-model="element.viewType" placeholder="请选择"  filterable>
								<el-option v-for="item in viewTypeList" :key="item.value" :label="item.name" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div style="width:60px;text-align: center;" v-show="showSearch">
							<el-checkbox v-model="element.displayInSearch" style="height: 24px;"></el-checkbox>
						</div>
					</div>
				</draggable>
			</div>
			<div v-show="showSub" style="margin-left: 20px;">
				<div style="text-align: center;">子数据源</div>
				<div style="display: flex;">
					<div style="width:60px;text-align: center;">
						显示列
					</div>
					<div style="width:150px;text-align: center;">
						名称
					</div>
					<div style="width:150px;text-align: center;">
						视图类型
					</div>
				</div>
				<draggable :list="subFieldList">
					<div v-for="element in subFieldList" :key="element.columnName" style="display: flex;margin-top: 5px;">
						<div style="width:60px;text-align: center;">
							<el-checkbox v-model="element.displayInList" style="height: 24px;"></el-checkbox>
						</div>
						<div style="width:150px;text-align: center;">
							{{element.name}}
						</div>
						<div style="width:150px;text-align: center;">
							<el-select size="mini" v-model="element.viewType" placeholder="请选择"  filterable>
								<el-option v-for="item in viewTypeList" :key="item.value" :label="item.name" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
				</draggable>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		VueDraggableNext
	} from 'vue-draggable-next';
	import shareData from '@/utils/shareData.js';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "TableFieldSelectPage",
		props: ["scope"],
		components: {
			draggable: VueDraggableNext
		},
		data() {
			return {
				showPage: false,
				showSearch:true,
				showSub:false,
				fieldList: [],
				subFieldList: [],
				tableName: "",
				subTableName:"",
				viewTypeList:[]
			}
		},mounted() {
			this.viewTypeList=shareData.viewTypeList;
		},
		methods: {
			setVisible(visible) {
				this.showPage = visible;
				if (visible) {
					if(this.scope.dataSourceSelectPage.tableName!=this.tableName){
						this.tableName = this.scope.dataSourceSelectPage.tableName;
						this.getFieldList();
					}
					if(this.scope.pageTypeSelectPage.pageType=="formview"){
						this.showSearch=false;
						if(this.scope.dataSourceSelectPage.subTableName==""){
							this.showSub=false;
						}else{
							this.showSub=true;
							if(this.scope.dataSourceSelectPage.subTableName!=this.subTableName){
								this.subTableName = this.scope.dataSourceSelectPage.subTableName;
								this.getSubFieldList();
							}
						}
					}else if(this.scope.pageTypeSelectPage.pageType=="ureportview" 
					||this.scope.pageTypeSelectPage.pageType=="buttonparaview"
					||this.scope.pageTypeSelectPage.pageType=="actionview" ){
						this.showSearch=false;
					}else{
						this.showSearch=true;
						this.showSub=false;
						this.subTableName="";
					}
					if(this.scope["deviceSelectPage"]["device"]=="mobile"){
						if(this.scope.pageTypeSelectPage.pageType=="searchview"){
							if(this.scope.dataSourceSelectPage.treeTable){
								this.showSearch=false;
							}else{
								this.showSearch=true;
							}
						}else{
							this.showSearch=false;
						}
					}
				}
			},
			getFieldList() {
				var that = this;
				restUtil.getAction(this,"webide/pagewizarddialog/initTableFieldSelectPage?tableName=" + this.tableName).then(
					function(response) {
						if (response.data.code == 1) {
							that.fieldList = response.data.tableFieldList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			getSubFieldList() {
				var that = this;
				restUtil.getAction(this,"webide/pagewizarddialog/initTableFieldSelectPage?tableName=" + this.subTableName).then(
					function(response) {
						if (response.data.code == 1) {
							that.subFieldList = response.data.tableFieldList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			getReturnData() {
				var data={
					"fieldList": this.fieldList
				};
				if(this.showSub){
					data["subFieldList"]= this.subFieldList;
				}
				return data;
			},getPreviousPage(){
				return "pageBaseInfoPage";
			},getNextPage(){
				if(this.scope["pageTypeSelectPage"]["pageType"]=="ureportview"){
					return "uReportSelectPage";
				}
				return undefined;
			},isCompletedPage(){
				if(this.scope["pageTypeSelectPage"]["pageType"]=="ureportview"){
					return false;
				}
				return true;
			}
		},
	}
</script>

<style>
</style>
